<template>
  <div class="container">
    <mavon-editor ref="md" v-model="value" style="min-height: 600px" @imgAdd="upload" @change="change" />
  </div>
</template>
<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  name: 'Markdown',
  components: {
    mavonEditor
  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data: function() {
    return {
      value: this.content,
      html: '',
      configs: {
      }
    }
  },
  watch: {
    content(newValue) {
      this.value = newValue
    },
    value(newValue) {
      this.$emit('input', newValue)
    }
  },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    upload(pos, $file) {
      const formData = new FormData()
      formData.append('file', $file)
      formData.append('path', 'editor')
      this.$http({
        url: '/admin/common/upload',
        method: 'post',
        cache: false,
        data: formData,
        processData: false,
        contentType: false
      }).then(response => {
        this.$refs.md.$img2Url(pos, this.$store.state.app.server_api + '/admin/common/download/' + response.param)
      }).catch(() => {})
    },
    change(value, render) {
      // render 为 markdown 解析后的结果
      this.html = render
      this.$emit('render', render)
    }
  }
}
</script>
<style scoped>
    .editor-btn{
        margin-top: 20px;
    }
</style>
